<template>
  <div class="avatar-wrapper group" v-if="arr.length > 1">
    <img
    v-for="(img,i) in arr"
    v-bind:key="i"
    class="avatar-img"
    v-lazy="img" alt=""
    :onerror="`onerror=null;src='https://iyunlang.top/assets/images/avatar4.png'`"
    >
  </div>
  <img
    v-else
    class="avatar-wrapper"
    v-lazy="arr.length && arr[0]" alt=""
    :onerror="`onerror=null;src='https://iyunlang.top/assets/images/avatar4.png'`"
  >
</template>
<script>
export default {
  name: 'AvatarGroup',
  props: {
    arr: {
      type: Array
    }
  }
}
</script>
<style lang="scss" scoped>
  .avatar {
    &-wrapper {
      width: 38px;
      height: 38px;
      border-radius: 4px;
      &.group {
        padding: 2px;
      }
    }
    &-img {
      width: 45%;
      height: 45%;
      float: left;
      border-radius: 4px;
    }
    &-img:nth-child(2n+1) {
      margin-right: 4px;
    }
  }
</style>
